import "@wangeditor/editor/dist/css/style.css"; // 引入 css
import { useState, useEffect } from "react";
import { Editor, Toolbar } from "@wangeditor/editor-for-react";
import { IDomEditor, IEditorConfig, IToolbarConfig } from "@wangeditor/editor";
import { uploadImageToArticle } from "@/apis/draftApi.ts";

/**
 * 发现问题
 *
 * 1. 上传完头像之后可以正常的插入图片，而且可以对图片进行修改，但是一旦进行修改之后图片就会重新上传，这回导致上传的次数过多，影响效率。
 */

interface Props {
  content: string;
  // 这里的id是需要上传文章的id
  articleId: string;
  setArticleContent: (content: string) => void;
}

function MyEditor({ content, setArticleContent, articleId }: Props) {
  // editor 实例
  const [editor, setEditor] = useState<IDomEditor | null>(null); // TS 语法

  // 编辑器内容
  const [html, setHtml] = useState("");

  // 工具栏配置
  const toolbarConfig: Partial<IToolbarConfig> = {}; // TS 语法

  // 编辑器配置
  const editorConfig: Partial<IEditorConfig> = {
    // TS 语法
    placeholder: "请输入内容...",
    MENU_CONF: {},
  };

  editorConfig.MENU_CONF!["uploadImage"] = {
    // 自定义上传
    async customUpload(file: File, insertFn: any) {
      // file 即选中的文件
      // 自己实现上传，并得到图片 url alt href
      // 最后插入图片
      console.log("file", file);
      const res = await uploadImageToArticle(file, articleId);

      console.log("res", res.data);

      const { url, alt, href } = res.data || {};

      insertFn(url, alt, href);
    },
  };

  // 及时销毁 editor ，重要！
  useEffect(() => {
    return () => {
      if (editor == null) return;
      editor.destroy();
      setEditor(null);
    };
  }, [editor]);

  // 挂载完成时的操作
  useEffect(() => {
    setHtml(content);
  }, []);

  return (
    <>
      <div style={{ border: "1px solid #ccc", zIndex: 100 }}>
        <Toolbar
          editor={editor}
          defaultConfig={toolbarConfig}
          mode="default"
          style={{ borderBottom: "1px solid #ccc" }}
        />
        <Editor
          defaultConfig={editorConfig}
          value={content}
          onCreated={setEditor}
          onChange={(editor) => setArticleContent(editor.getHtml())}
          mode="default"
          style={{ height: "500px", overflowY: "hidden" }}
        />
      </div>
      <div style={{ marginTop: "15px" }}>{html}</div>
    </>
  );
}

export default MyEditor;
